import React from "react";
import { context } from "../context";

export function useSectionChildren(
  props
): [
  React.ReactElement,
  React.ReactElement,
  React.ReactElement,
  Partial<Resumes & { fontScale: number }>
] {
  const {
    certificate,
    education,
    work,
    project,
    skills,
    school,
    internship,
    selfevaluation,
    custom,
    hobby,
    resumeHeader,
  } = props;
  const components: any = {
    certificate,
    education,
    project,
    work,
    skills,
    school,
    internship,
    selfevaluation,
    custom,
    hobby,
  };
  const { resume } = context;

  const { customization, content } = resume;
  const { layout, sectionOrder = {} } = customization;
  const { detailsPosition, colsFromDetails } = layout || {
    detailsPosition: "",
    colsFromDetails: {},
    colWidthsFromDetails: {},
  };
  const leftSectionChildren: any = [];
  const rightSectionChildren: any = [];
  const orders = sectionOrder[colsFromDetails[detailsPosition]] || {};
  Object.keys(orders).forEach((item) => {
    orders[item]?.forEach((section: string) => {
      if (components[section] && content[section]) {
        item === "leftSectionChildren"
          ? leftSectionChildren.push(
              React.cloneElement(components[section], { key: section })
            )
          : rightSectionChildren.push(
              React.cloneElement(components[section], { key: section })
            );
      }
    });
  });
  return [leftSectionChildren, rightSectionChildren, resumeHeader, resume];
}
